<template>
    <div class="main">
        <div class="cmain">
            <el-select v-model="value1" multiple placeholder="请选择哪几周上机">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
            </el-select>
            <el-cascader v-model="value2" :props="props" :options="woptions" clearable placeholder="请选择具体的上机时间段" class="text1"></el-cascader>
            <el-cascader v-model="value3" :options="coptions" clearable placeholder="请选择上机的课程信息" class="text2"></el-cascader>
            <el-button type="primary" round>添加</el-button>
        </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      options: [{
        value: '选项1',
        label: '1'
      }, {
        value: '选项2',
        label: '2'
      }, {
        value: '选项3',
        label: '3'
      }, {
        value: '选项4',
        label: '4'
      }, {
        value: '选项5',
        label: '5'
      }, {
        value: '选项6',
        label: '6'
      }, {
        value: '选项7',
        label: '7'
      }, {
        value: '选项8',
        label: '8'
      }, {
        value: '选项9',
        label: '9'
      }, {
        value: '选项10',
        label: '10'
      }, {
        value: '选项11',
        label: '11'
      }, {
        value: '选项12',
        label: '12'
      }, {
        value: '选项13',
        label: '13'
      }, {
        value: '选项14',
        label: '14'
      }, {
        value: '选项15',
        label: '15'
      }, {
        value: '选项16',
        label: '16'
      }, {
        value: '选项17',
        label: '17'
      }, {
        value: '选项18',
        label: '18'
      }, {
        value: '选项19',
        label: '19'
      }, {
        value: '选项20',
        label: '20'
      }],
      woptions: [
        {
          value: '周一',
          label: '1',
          children: [{
            value: '第一节',
            label: '1-2'
          }, {
            value: '第二节',
            label: '3-4'
          }, {
            value: '第三节',
            label: '5-6'
          }, {
            value: '第四节',
            label: '7-8'
          }, {
            value: '第五节',
            label: '9-10'
          }]
        },
        {
          value: '周二',
          label: '2',
          children: [{
            value: '第一节',
            label: '1-2'
          }, {
            value: '第二节',
            label: '3-4'
          }, {
            value: '第三节',
            label: '5-6'
          }, {
            value: '第四节',
            label: '7-8'
          }, {
            value: '第五节',
            label: '9-10'
          }]
        },
        {
          value: '周二',
          label: '3',
          children: [{
            value: '第一节',
            label: '1-2'
          }, {
            value: '第二节',
            label: '3-4'
          }, {
            value: '第三节',
            label: '5-6'
          }, {
            value: '第四节',
            label: '7-8'
          }, {
            value: '第五节',
            label: '9-10'
          }]
        },
        {
          value: '周二',
          label: '4',
          children: [{
            value: '第一节',
            label: '1-2'
          }, {
            value: '第二节',
            label: '3-4'
          }, {
            value: '第三节',
            label: '5-6'
          }, {
            value: '第四节',
            label: '7-8'
          }, {
            value: '第五节',
            label: '9-10'
          }]
        },
        {
          value: '周二',
          label: '5',
          children: [{
            value: '第一节',
            label: '1-2'
          }, {
            value: '第二节',
            label: '3-4'
          }, {
            value: '第三节',
            label: '5-6'
          }, {
            value: '第四节',
            label: '7-8'
          }, {
            value: '第五节',
            label: '9-10'
          }]
        },
        {
          value: '周二',
          label: '6',
          children: [{
            value: '第一节',
            label: '1-2'
          }, {
            value: '第二节',
            label: '3-4'
          }, {
            value: '第三节',
            label: '5-6'
          }, {
            value: '第四节',
            label: '7-8'
          }, {
            value: '第五节',
            label: '9-10'
          }]
        },
        {
          value: '周二',
          label: '7',
          children: [{
            value: '第一节',
            label: '1-2'
          }, {
            value: '第二节',
            label: '3-4'
          }, {
            value: '第三节',
            label: '5-6'
          }, {
            value: '第四节',
            label: '7-8'
          }, {
            value: '第五节',
            label: '9-10'
          }]
        }
      ],
      coptions: [
        {
          value: '周一',
          label: 'Web基础',
          children: [{
            value: '第一节',
            label: '于艳丽'
          }]
        }
      ],
      props: { multiple: true },
      value1: [],
      value2: [],
      value3: []
    }
  }
}
</script>

<style lang="less" scoped>
.main{
  position: fixed;
  top: 20%;
  left: 55%;
  transform: translate(-50%,0);
  height: 45%;
  width: 60%;
  background-color: #B3C0D1;
  box-shadow: 0 0 5px 10px  #D3DCE6;
  border-radius: 1%;
}
.cmain{
  position: absolute;
  height: 60%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.el-select{
  width: 100%;
  top: 0;
  background-color:  #B3C0D1;
}
.text1{
  top: 10%;
}
.text2{
  top: 20%;
}
.el-button{
  position: absolute;
  top: 85%;
  left: 0%;
  width: 100%;
}
.el-cascader{
  width: 100%;
}
.span{
  font-size: 15px;
}
</style>
